<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <title>注册页</title>
</head>

<body>
    <form id="registerForm">
        <div><label>用户名<input type="text" name="name"></label></div>
        <div><label>密码<input type="password" name="password"></label></div>
        <div><label><button type="submit">注册</button></label></div>
    </form>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <!-- 引入jquery -->
    <script>
        //监听submit事件
        const $registerForm = $('#registerForm')
        $registerForm.on('submit', (e) => {
            e.preventDefault() //阻止默认事件，否则会自动刷新页面
            const name = $registerForm.find('input[name=name]').val()
            const password = $registerForm.find('input[name=password]').val()
            console.log(name, password)
            //发送AJAX请求提交数据
            $.ajax({
                //get请求只能把数据放到url上，POST请求默认会把数据放到最下面
                method: 'POST',
                //上传的是一个json字符串，为了让浏览器识别，所以要定义格式
                contentType: 'text/json;charset=UTF-8',
                url: '/register',
                data: JSON.stringify({ name: name, password: password }) //可以简写成JSON.stringify({name，password})
            }).then(() => {
                alert('注册成功')
                location.href = '/sign_in.html' //注册成功就跳转到登录页
            },
                () => {
                })
        })
    </script>
</body>

</html>